<template>
  <div>
  <div class="policy-container">
    <div class="policy-topic">
      <!-- 左侧蓝色背景部分 -->
      <div class="sidebar">
        <div class="sidebar-title">政策专题</div>
        <button class="sidebar-button">全部专题</button>
        <div class="divider"></div>
        <ul class="sidebar-list">
          <li
              v-for="(item, index) in sidebarItems"
              :key="index"
              class="sidebar-item"
              :class="{ 'active': activeSidebarIndex === index }"
              @click="changeSidebarItem(index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>

      <!-- 右侧白色背景部分 -->
      <div class="content-wrapper">
        <div class="content">
          <ul class="topic-list">
            <li
                v-for="(topic, index) in paginatedTopics"
                :key="index"
                class="topic-item"
            >
              <div class="topic-content">
                <span
                    class="topic-number"
                    :style="{ color: getNumberColor(index) }"
                >
                  {{ (currentPage - 1) * pageSize + index + 1 }}
                </span>
                <span class="topic-title">{{ topic.title }}</span>
                <span class="topic-date">{{ topic.date }}</span>
              </div>
              <div class="topic-divider" v-if="index < paginatedTopics.length - 1"></div>
            </li>
          </ul>
        </div>

        <!-- 分页箭头 - 放在最右侧 -->
        <div class="pagination-arrows">
          <button
              class="arrow-btn up-arrow"
              :disabled="currentPage === 1"
              @click="prevPage"
          >
            ↑
          </button>
          <button
              class="arrow-btn down-arrow"
              :disabled="currentPage >= totalPages"
              @click="nextPage"
          >
            ↓
          </button>
        </div>
      </div>
    </div>

  </div>
  <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {ContactFooter},
  data() {
    return {
      activeSidebarIndex: 0,
      currentPage: 1,
      pageSize: 10,
      sidebarItems: [
        '工业软件', '数字孪生', '工业安全', '标识解析', '数字经济',
        '智能制造', '企业上云', '信创', '云计算', '智能网联汽车'
      ],
      topicsData: {
        0: Array(25).fill().map((_, i) => ({
          title: `工业软件相关政策 ${i + 1}：《关于促进工业软件高质量发展的指导意见》`,
          date: `2023-${10 + Math.floor(i/10)}-${(i%20)+1}`
        })),
        1: Array(18).fill().map((_, i) => ({
          title: `数字孪生应用案例 ${i + 1}：制造业数字化转型实践`,
          date: `2023-${9 + Math.floor(i/10)}-${(i%20)+1}`
        })),
        2: Array(15).fill().map((_, i) => ({
          title: `工业安全技术规范 ${i + 1}：网络安全防护指南`,
          date: `2023-${8 + Math.floor(i/10)}-${(i%20)+1}`
        })),
        3: Array(12).fill().map((_, i) => ({
          title: `标识解析体系建设 ${i + 1}：工业互联网创新发展行动计划`,
          date: `2023-${7 + Math.floor(i/10)}-${(i%20)+1}`
        })),
        4: Array(8).fill().map((_, i) => ({
          title: `数字经济政策 ${i + 1}：数字化转型促进条例`,
          date: `2023-${6 + Math.floor(i/10)}-${(i%20)+1}`
        }))
      }
    };
  },
  computed: {
    currentTopics() {
      return this.topicsData[this.activeSidebarIndex] || [];
    },
    paginatedTopics() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.currentTopics.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.currentTopics.length / this.pageSize);
    }
  },
  methods: {
    changeSidebarItem(index) {
      this.activeSidebarIndex = index;
      this.currentPage = 1;
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    getNumberColor(index) {
      const globalIndex = (this.currentPage - 1) * this.pageSize + index;
      return globalIndex < 3 ? '#FF4D4F' : '#999';
    }
  }
};
</script>

<style scoped>
.policy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.policy-topic {
  display: flex;
  position: relative;
  min-height: 600px;
}

/* 左侧蓝色背景部分 */
.sidebar {
  width: 35%;
  background-color: #1654C3;
  padding: 30px;
  color: white;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative; /* 确保z-index生效 */
  z-index: 1; /* 确保蓝色区域在下层 */
}

.sidebar-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: left;
}

.sidebar-button {
  width: 100%;
  padding: 12px 0;
  background-color: white;
  color: #1654C3;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  transition: all 0.3s;
}

.sidebar-button:hover {
  background-color: #f0f0f0;
}

.divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 20px 0;
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.sidebar-item {
  padding: 15px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
  position: relative;
}

.sidebar-item.active {
  background-color: #4576CF;
  font-weight: bold;
}

.sidebar-item:hover {
  background-color: #4576CF;
}

.item-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 10px 0;
  width: 100%;
}

/* 右侧内容区域 */
.content-wrapper {
  position: absolute;
  left: 30%; /* 覆盖部分左侧区域 */
  right: 0;
  top: 5%;
  bottom: 5%;
  display: flex;
}

.content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin-right: 50px; /* 为箭头留出空间 */
  position: relative;
  z-index: 2; /* 确保白色区域在上层 */
}

.topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.topic-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.topic-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
  width: 100%;
}

.topic-number {
  font-size: 18px;
  font-weight: bold;
  width: 30px;
  text-align: left;
  flex-shrink: 0;
}

.topic-title {
  flex: 1;
  color: #666;
  font-size: 14px;
  padding: 0 15px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-date {
  color: #BFBFBF;
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
  padding-left: 15px;
}

.topic-divider {
  height: 1px;
  background-color: #f0f0f0;
  width: 100%;
}

/* 分页箭头样式 - 放在最右侧 */
.pagination-arrows {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 3;
}

.arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.arrow-btn:hover:not(:disabled) {
  background-color: #f0f0f0;
  transform: scale(1.1);
}

.arrow-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .policy-topic {
    flex-direction: column;
    height: auto;
  }

  .sidebar, .content-wrapper {
    width: 100%;
    position: static;
  }

  .content {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .pagination-arrows {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 15px;
    transform: none;
  }

  .up-arrow, .down-arrow {
    margin: 0 10px;
  }
}
</style>